Programmeren 5
Les 13 en 14

Apache Cordova installeren

Doelstelling

Met Apache Cordova is het mogelijk om met één codebase app's voor meerdere platformen (iOS, Android, Windows Phone) te ontwikkelen. Cordova gebruikt de default browser van het platform waar het op draait om de gebruikersinterface te renderen.

De adoptie van het platform door Microsoft en integratie in Visual Studio is een plus punt. Daarnaast biedt Cordova (ervaren) web ontwikkelaars de mogelijkheid om redelijk snel aan de slag te kunnen en mobile apps te gaan bouwen.

In deze handleiding leer je hoe je een JS / HTML Cordova applicatie maakt en deze installeert op verschillende native mobile platforms via de Cordova command line interface (CLI). Voor een gedetailleerde verwijzing naar de commando-lijn van Cordova, raadpleeg de CLI-referentie

Na deze les weet je hoe:

1. je Cordova op je computer installeert
2. de nodige SDK's moet downloaden om een Android mobiele webapp te maken
3. je Android Studio installeert om Cordova app's te maken
4. je Android Virtual Devices moet installeren
5. hoe je een app uitvoert op een AVD
6. hoe je een app uitvoert op een Android toestel

Leerpad

1. Cordova - CLI installeren
2. Cordova - noodzakelijke onderdelen installeren
   1. Android
      1. De Java JDK installeren
      2. De Android SDK installeren met Android Studio
      3. De Android SDK Manager
3. Cordova - een project maken
4. Cordova - een platform toevoegen
5. Filmpje: Een Cordova app maken
6. Cordova - het config.xml bestand
7. Cordova - build
8. Cordova - virtuele apparaten
9. Filmpje: Een Cordova app builden
10. Cordova - Testen op een toestel

Je vindt een overzicht van de hierboven beschreven stappen op de website van Cordova, Create your first Cordova app.

Opdracht

1. Installeer Cordova op je lokale computer.
2. Maak een map met de naam cordova in de map die je voor die module hebt gemaakt.
3. Maak in de cordova map een Cordova app met de naam vos (veilig op de school). Dat is de naam van de app die we in de volgende lessen gaan ontwikkelen. Standaard maakt cordova create commando een basis web-gebaseerde applicatie waarvan de startpagina het www/index.html bestand van het project is.
4. Build het de gegenereerde app.
5. Test die uit op een toestel (als je over een Android tablet of telefoon beschikt).
6. Test die uit op een virtuele computer.
7. Als je het project wilt bewerken met Visual Studio open je de www map (File->Open->Folder). Ik gebruik VS niet op de app te runnen, dat doen we in deze module vanaf de command prompt. Als ik met Cordova werk verkies ik de Visual Code of de PhpStorm IDE.
8. Synhroniseer alleen de www map ze met Bitbucket en Cloud9. In de message van de commit zet je: "les 13 en 14 Start VOS Cordova app".Vergeet niet je .gitignore bestand aan te passen. Je wilt alleen de www en de res/icon/android (daar staan de afbeeldingen voor de app in) map kopiëren naar Cloud9:

   dotnetcore/hwapp/bin/
   dotnetcore/hwapp/obj/
   .vs
   *.sln
   # Cordova bestanden
   vos/.npmignore
   vos/config.xml
   vos/hooks/
   vos/node_modules/
   vos/package-lock.json
   vos/package.json
   vos/platforms
   vos/plugins
   vos/res/README.md
   vos/res/screen
   vos/res/icon/bada
   vos/res/icon/bada-wac
   vos/res/icon/blackberry
   vos/res/icon/blackberry10
   vos/res/icon/ios
   vos/res/icon/tizen
   vos/res/icon/webos
   vos/res/icon/windows-phone

9. Stuur een tekstbestand door via onderstaande link met een link naar Cloud9 en Bitbucket